<template>
  <div class="quest-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="站点名称" />
      <el-table-column prop="lnglat" label="站点经纬度" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="editHandle(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="codeShowHandle(scope.row)"
            >二维码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-24">
      <Pagination
        class="text-center"
        :page="pageForm.page"
        :limit="pageForm.limit"
        :total="tableTotal"
        @pagination="pageHandle"
        v-if="false"
      />
    </div>
    <!-- 添加/编辑弹窗 -->
    <el-dialog v-model="show" title="添加站点" width="700">
      <div class="mt-12">
        <el-form
          :model="form"
          ref="formRef"
          label-width="auto"
          style="max-width: 600px"
        >
          <el-form-item
            label="图片"
            prop="img"
            :rules="[
              {
                required: true,
                message: '请上传站点图片',
                trigger: 'blur'
              }
            ]"
          >
            <SingleImage v-model="form.img" />
          </el-form-item>
          <el-form-item
            label="站点名称"
            prop="name"
            :rules="[
              {
                required: true,
                message: '请输入站点名称',
                trigger: 'blur'
              }
            ]"
          >
            <el-input v-model="form.name" placeholder="请输入站点名称" />
          </el-form-item>
          <el-form-item
            label="站点描述"
            prop="remark"
            :rules="[
              {
                required: true,
                message: '请输入站点描述',
                trigger: 'blur'
              }
            ]"
          >
            <el-input v-model="form.remark" placeholder="请输入站点名称" />
          </el-form-item>
          <el-form-item
            label="经纬度"
            prop="lnglat"
            :rules="[
              {
                required: true,
                message: '请输入经纬度',
                trigger: 'blur'
              }
            ]"
          >
            <el-input v-model="form.lnglat" placeholder="请输入经纬度" />
          </el-form-item>
          <el-form-item
            label="积分"
            prop="points"
            :rules="[
              {
                required: true,
                message: '请输入积分',
                trigger: 'blur'
              }
            ]"
          >
            <el-input-number v-model="form.points" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="属性">
            <el-radio-group v-model="form.type">
              <el-radio-button
                :label="item.label"
                :value="item.value"
                v-for="item in propertyMap"
                :key="item.value"
              />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              active-text="启用"
              inactive-text="禁用"
              :active-value="1"
              :inactive-value="2"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="formSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 二维码弹窗 -->
    <el-dialog v-model="codeShow" title="站点二维码" width="360">
      <div class="mt-12">
        <img :src="codeImg" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="getCodeImg(1)">重新生成</el-button>
          <el-button type="primary" @click="downFileHandle"> 下载 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Pagination from '@/components/Pagination';
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import SingleImage from '@/components/Upload/SingleImage';
import {
  apiLocationAll,
  apiLocationEdit,
  apiLocationGenCode
} from '@/api/site';
import { propertyMap } from '@/utils/defConst';
import { downloadURL } from '@/utils/utils';
const tableData = ref([]);
const tableTotal = ref(0);
const show = ref(false);
const formRef = ref(null);
const form = ref({
  question: '',
  options: [],
  points: 0,
  tips: '',
  status: 1,
  img: ''
});
/**
 * 编辑
 */
const editId = ref('');
const editHandle = (record) => {
  show.value = true;
  formRef.value?.resetFields();
  editId.value = record.id;
  form.value = JSON.parse(JSON.stringify(record));
};
/**
 * 表单保存
 */
const formSubmit = async () => {
  await formRef.value.validate(async (valid) => {
    if (valid) {
      const api = editId.value ? apiLocationEdit : '';
      const params = editId.value
        ? { ...form.value, id: editId.value }
        : form.value;
      const { code } = await api(params);
      if (code === 200) {
        ElMessage({
          type: 'success',
          message: '保存成功'
        });
        show.value = false;
        getData();
      }
    }
  });
};
/**
 * 表格勾选复选框
 */
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val);
};
/**
 * 分页
 */
const pageForm = ref({
  page: 1,
  limit: 20
});
const pageHandle = (val) => {
  pageForm.value = val;
  getData();
};
// 获取表格数据
const getData = async () => {
  const { data, total } = await apiLocationAll(pageForm.value);
  tableData.value = data;
  tableTotal.value = total;
};
onMounted(() => {
  getData();
});
/**
 * 站点二维码
 */
const codeShow = ref(false);
const codeShowHandle = async ({ id }) => {
  editId.value = id;
  codeShow.value = true;
  getCodeImg();
};
const codeImg = ref('');
const getCodeImg = async (refresh = 0) => {
  const { data } = await apiLocationGenCode({
    id: editId.value,
    refresh: refresh
  });
  codeImg.value = data.path;
  if (refresh === 1) {
    ElMessage.success('生成成功');
  }
};
const downFileHandle = () => {
  const arr = codeImg.value.split('/');
  const filename = arr[arr.length - 1];
  downloadURL(codeImg.value, filename);
};
</script>

<style scoped>
.quest-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
}
</style>
